<template>
  <div id="detail-info">
    <div class="overflow-scroll bg-white shadow-2xl sm:rounded-lg h-screen my-6 mx-6" v-if="data">
      <div class="border-b border-gray-900/10 p-8">
        <h1 class="text-2xl">{{ data.name + "方解图" }}</h1>
        <img class="h-108 w-108 mx-auto" :src="data.imageAddress" alt=""/>
      </div>
      <div class="px-4 py-6 sm:px-6">
        <h3 class="text-base font-semibold leading-7 text-gray-900 border-b mb-6">{{ data.name + "信息" }}</h3>
        <p class="mt-1 max-w-2xl text-sm leading-6 text-gray-500">出处：{{ data.provenance }}</p>
      </div>
      <div class="border-t border-gray-100">
        <dl class="divide-y divide-gray-100">
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 bg-gray-200">
            <dt class="text-sm font-medium text-gray-900">名称</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ data.name }}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-900">拼音</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.spell}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 bg-gray-200">
            <dt class="text-sm font-medium text-gray-900">分类</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ data.classify }}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-900">组成</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ data.constitute }}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 bg-gray-200">
            <dt class="text-sm font-medium text-gray-900">用法</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.medicineUsage}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-900">功用</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.effect}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 bg-gray-200">
            <dt class="text-sm font-medium text-gray-900">主治</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.inCharge}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-900">病机</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.pathogenesis}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 bg-gray-200">
            <dt class="text-sm font-medium text-gray-900">运用</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.apply}}</dd>
          </div>
          <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-900">方歌</dt>
            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{data.theSquareSong}}</dd>
          </div>
        </dl>
      </div>
    </div>
    <div class="absolute top-24 left-3.5">
      <a-button type="outline" @click="$router.back">
        <icon-left />
        回到上一级
      </a-button>
    </div>
  </div>
</template>

<script setup>
import {PaperClipIcon} from '@heroicons/vue/20/solid'
import {useRoute} from "vue-router";
import myAxios from "../../plugins/myAxios.ts";
import {onMounted, ref} from "vue";

const route = useRoute();
const id = route.params.id;
const data = ref({})

const getData = async () => {
  const res = await myAxios.get(`/medicine/${id}`)
  if (res.code === 0) {
    data.value = res.data
    data.value.imageAddress = "/src/assets/images/images/" + data.value.imageAddress.split("\\")[1]
    console.log(data.value)
  }
}
onMounted(() => {
  getData()
})
</script>

<style scoped>
#detail-info {
  width: 100vw;
  padding: 10px 20%;
}
</style>
